import { useProps } from '@ray-js/panel-sdk';

import { differenceBy } from 'lodash-es';
import { useSelector } from 'react-redux';
import { ReduxState } from '@/redux';

import { decodeClock } from '@/components/AlarmList/util';

export default function useGetNewAddCode() {
  const {
    clock_1: clock1,
    clock_2: clock2,
    clock_3: clock3,
    clock_4: clock4,
    clock_5: clock5,
    clock_6: clock6,
    clock_7: clock7,
    time_mode: timeMode,
  } = useProps(props => props);

  const { clockNames } = useSelector((state: ReduxState) => state?.cloudState) || {};

  const originCodeList = ['clock_4', 'clock_5', 'clock_6', 'clock_7'];

  const clockList = [
    {
      ...decodeClock(clock1, 'clock_1'),
      title: clockNames?.clock_1 || 'Clock 1',
      timeMode,
      enabledDelete: false,
    },
    {
      ...decodeClock(clock2, 'clock_2'),
      title: clockNames?.clock_2 || 'Clock 2',
      timeMode,
      enabledDelete: false,
    },
    {
      ...decodeClock(clock3, 'clock_3'),
      title: clockNames?.clock_3 || 'Clock 3',
      timeMode,
      enabledDelete: false,
    },
    {
      ...decodeClock(clock4, 'clock_4'),
      title: clockNames?.clock_4 || 'Clock 4',
      timeMode,
      enabledDelete: true,
    },
    {
      ...decodeClock(clock5, 'clock_5'),
      title: clockNames?.clock_5 || 'Clock 5',
      timeMode,
      enabledDelete: true,
    },
    {
      ...decodeClock(clock6, 'clock_6'),
      title: clockNames?.clock_6 || 'Clock 6',
      timeMode,
      enabledDelete: true,
    },
    {
      ...decodeClock(clock7, 'clock_7'),
      title: clockNames?.clock_7 || 'Clock 7',
      timeMode,
      enabledDelete: true,
    },
  ];

  const currentCodeList = clockList
    ?.filter((item, index) => !item.unSetted && index >= 3)
    ?.map(item => item.code);

  const newAddCode = differenceBy(originCodeList, currentCodeList)[0];

  return newAddCode;
}
